<template>
  <div class="index-main-wrap">
    <div class="header-wrap">
      <div class="header-title">图书馆空间预约系统</div>
      <div class="header-nav-wrap">
        <router-link to="/">
          <div class="nav-item" :class="{ active: path == '/' }">首页</div>
        </router-link>
        <router-link to="/libraryList/1">
          <div class="nav-item" :class="{ active: path == '/libraryList/1' }">阅览室预约</div>
        </router-link>
        <router-link to="/libraryList/2">
          <div class="nav-item" :class="{ active: path == '/libraryList/2' }">研究室预约</div>
        </router-link>
        <div v-if="!isLogin" class="nav-item" @click="visible = true">登 录</div>
        <router-link to="/personal" v-if="isLogin">
          <div class="nav-item" :class="{ active: path == '/personal' }">个人中心</div>
        </router-link>
        <div v-if="isLogin" class="nav-item" @click="logout">退出</div>
      </div>
    </div>
    <router-view :key="$route.path"></router-view>

    <el-dialog title="登 录" :visible.sync="visible" width="30%">
      <div>
        <el-form ref="form" :model="user" :rules="rules" label-width="70px">
          <el-form-item label="用户名" prop="number">
            <el-input v-model="user.number"></el-input>
          </el-form-item>
          <el-form-item label="密 码" prop="password">
            <el-input type="password" v-model="user.password"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submit()">登 录</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/req'
export default {
  data() {
    return {
      user: {
        number: '',
        password: '',
        path: this.$route.path,
      },
      rules: {
        number: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      visible: false,
      isLogin: false,
    }
  },
  watch: {
    // 监听路由对象中的变化
    $route(to, from) {
      // 当路由发生变化时执行的代码
      this.path = to.path
      // 你可以在这里根据路由变化执行相应的逻辑
    },
  },
  created() {
    this.path = this.$route.path
    const user = sessionStorage.getItem('user')
    this.isLogin = user ? true : false
  },
  mounted() {},
  methods: {
    submit() {
      this.$refs['form'].validate((valid) => {
        if (!valid) return
        request.post('/public/login', this.user).then((res) => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '登陆成功',
              duration: 1500,
            })
            sessionStorage.setItem('user', JSON.stringify(res.user))
            this.isLogin = true
            this.visible = false
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    logout() {
      sessionStorage.clear()
      this.isLogin = false
    },
  },
}
</script>

<style scoped>
.index-main-wrap {
  height: 100vh;
  width: 100vw;
}

.header-wrap {
  display: flex;
  background-color: #4bcfd6;
  height: 50px;
  align-items: center;
}

.header-wrap .header-title {
  color: #fff;
  margin-left: 100px;
  font-size: 24px;
  font-weight: 600;
}

.header-nav-wrap {
  display: flex;
  margin-left: 30px;
}

.header-nav-wrap .nav-item {
  margin-left: 15px;
  color: #fbfbfb;
  cursor: pointer;
  position: relative;
}

.header-nav-wrap .nav-item:hover {
  color: #fff;
}

.header-nav-wrap .nav-item:hover::after {
  height: 2px;
  background-color: #fff;
  position: absolute;
  content: ' ';
  width: 100%;
  top: 25px;
  left: 0;
}

.active::after {
  height: 2px;
  background-color: #fff;
  position: absolute;
  content: ' ';
  width: 100%;
  top: 25px;
  left: 0;
}
</style>
